<template>
    <div>
        <el-row>
            <el-col :span="12">
                <el-form-item label="尺寸">
                    <el-input-number v-model="field.size" :min="0" :max="24"/>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="必填">
                    <el-switch v-model="field.required"/>
                </el-form-item>
            </el-col>
            <el-col :span="5">
                <el-form-item label="块元素">
                    <el-switch v-model="field.block"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-form-item label="字段名">
            <el-input v-model="field.label"/>
        </el-form-item>
        <el-form-item label="字段数据">
            <el-input v-model="field.model"/>
        </el-form-item>
        <el-form-item label="提示">
            <el-input v-model="field.tip"/>
        </el-form-item>
        <template>
            <el-form-item label="显示方式">
                <el-radio-group v-model="displayType">
                    <el-radio-button v-for="(item,key) in displayTypeMap" :key="key"
                                     :label="key"
                                     :disabled="key !== dict.fields && !!(field.fields && field.fields.length)">
                        {{item}}
                    </el-radio-button>
                </el-radio-group>
            </el-form-item>
            <JSCode v-if="displayType === dict.render" v-model="field.render"/>
            <JSCode v-else-if="displayType === dict.component" v-model="field.component"/>
            <el-form-item label="SCOPE" v-else-if="displayType === dict.fields">
                <el-switch v-model="field.scope"/>
            </el-form-item>
            <el-form-item v-else-if="displayType === dict.template">
                TIP：原理是传递作用域插槽(slot)
                <p>
                    复杂的东西，推荐使用render函数，作用域传递不是很稳定
                </p>
                <p>
                    1、如果不是纯展示的东西，
                </p>
                <p>
                    2、推荐每个slot都单独使用组件，
                </p>
                <p>
                    3、否则会导致vue无法收集到依赖，
                </p>
                <p>
                    4、即页面无法自动更新(渲染)，
                </p>
                <p>
                    5、$forceUpdate()也是无效的。
                </p>
            </el-form-item>
        </template>
        {{field}}
    </div>
</template>

<script>
    import JSCode from './JSCode'

    export default {
        components: {
            JSCode,
        },
        inject: ['desForm'],
        props: {
            field: Object,
        },
        data() {
            const dict = this.dict = {
                component: 'component',
                fields: 'fields',
                render: 'render',
                template: 'template',
            }
            this.displayTypeMap = {
                [dict.component]: '组件',
                [dict.render]: 'render',
                [dict.fields]: '嵌套',
                [dict.template]: 'template',
            }
            this.cache = {}
            return {
                displayType: this.getDefaultDisplayType(), // 三选一，优先级 render > component > fields(递归用)
            }
        },
        methods: {
            getDefaultDisplayType() {
                for (let k in this.displayTypeMap) {
                    if (this.field[k]) return k
                }
            },
        },
        watch: {
            displayType(newVal) {
                const {field, dict, displayTypeMap, cache} = this
                const dFrom = this.desForm.dForm
                for (let k in displayTypeMap) {
                    if (k === newVal) continue
                    field[k] && (cache[k] = field[k])
                    this.$delete(field, k)
                }
                if (field[newVal]) return

                // this.$delete(dFrom.model, field.model)

                let val = cache[newVal]
                if (!val) {
                    switch (newVal) {
                        case dict.component:
                            val = {}
                            break
                        case dict.fields:
                            val = []
                            break
                        case dict.render:
                            val = function (h) {
                            }
                        case dict.template:
                            val = true
                            break
                    }
                }
                this.$set(field, newVal, val)
            },
        },
    }
</script>

<style lang="scss" scoped>

</style>
